<!-- 菜单页，首页是菜单的一部分 -->
<template>
  <div class="common-layout">
    <el-container>
      <!-- 2. 侧边栏 -->
      <el-aside width="120px">
        <el-menu class="el-menu-vertical-demo" router>
          <!-- close-on-click-outside="true" 收起来 -->
          <div class="title">通用后台管理系统</div>
          <!-- 2-1 首页 -->
          <el-menu-item index="home">
            <el-icon>
              <House />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <!-- 2-2 系统概览 -->
          <el-menu-item index="overview" v-if="userStore.identity==='超级管理员'">
            <el-icon>
              <Document />
            </el-icon>
            <span>系统概览</span>
          </el-menu-item>
          <!-- 2-3 用户管理 -->
          <el-sub-menu index="3" v-if="userStore.identity==='超级管理员' || userStore.identity==='用户管理员'">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item-group title="管理员管理">
              <el-menu-item index="product_manage">产品管理员</el-menu-item>
              <el-menu-item index="users_manage">用户管理员</el-menu-item>
              <el-menu-item index="message_manage">消息管理员</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="员工管理">
              <el-menu-item index="user_list">用户列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <!-- 2-4 产品管理 -->
          <el-sub-menu index="4" v-if="userStore.identity==='超级管理员' || userStore.identity==='产品管理员'">
            <template #title>
              <el-icon>
                <TakeawayBox />
              </el-icon>
              <span>产品管理</span>
            </template>
            <el-menu-item-group title="入库管理">
              <el-menu-item index="product_manage_list">产品列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="出库管理">
              <el-menu-item index="out_product_manage_list">出库列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <!-- 2-5 消息管理 -->
          <el-sub-menu index="5"  v-if="userStore.identity==='超级管理员' || userStore.identity==='消息管理员'">
            <template #title>
              <el-icon>
                <ChatSquare />
              </el-icon>
              <span>消息管理</span>
            </template>
            <el-menu-item-group title="消息管理">
              <el-menu-item index="message_list">消息列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="回收站">
              <el-menu-item index="recycle">回收站</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <!-- 2-6 合同管理 -->
          <el-menu-item index="file">
            <el-icon><icon-menu /></el-icon>
            <span>合同管理</span>
          </el-menu-item>
          <!-- 2-7 操作日志 -->
          <el-menu-item index="operation_log">
            <el-icon>
              <Message />
            </el-icon>
            <span>操作日志</span>
          </el-menu-item>
          <!-- 2-8 登录日志 -->
          <el-menu-item index="login_log">
            <el-icon>
              <Files />
            </el-icon>
            <span>登录日志</span>
          </el-menu-item>
          <!-- 2-9 系统管理 -->
          <el-menu-item index="setting">
            <el-icon>
              <Tools />
            </el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 1. 头部 -->
        <el-header>
          <span class="header-left-content">{{ userStore.identity!=='用户' ? '管理员'+ userStore.name : userStore.name+'同学'}}，欢迎您登录本系统！</span>
          <div class="header-right-content">
            <el-badge :is-dot='noread' class="item" @click="openDepartmentMessage">
              <el-icon :size="20" class="message"><Message /></el-icon>
            </el-badge>
            <el-avatar :size="24" :src="userStore.imageUrl" />
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">设置</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goSetting">个人设置</el-dropdown-item>
                  <el-dropdown-item @click="goLoginLog">登录日志</el-dropdown-item>
                  <el-dropdown-item @click="goLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 3. 主体 -->
        <el-main>
          <!-- 点击哪个就跳转渲染哪个路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <departmentMsg ref="department_msg" ></departmentMsg>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted} from 'vue';
import { Document, Menu as IconMenu, } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useUserInfo } from '@/store/userinfor.js'; // 头像
import { useMsg } from '@/store/message.js';  // 部门消息
import departmentMsg from '@/components/department_message.vue';
import { bus } from "@/utils/mitt.js";

const router = useRouter()
const userStore = useUserInfo() 
const msgStore = useMsg()  

const noread = ref(false)
onMounted(async () => {
  await msgStore.returnReadList(localStorage.getItem('id')); 
  const arr = JSON.parse(JSON.stringify(msgStore.read_list)) 
  // console.log(Array.isArray(JSON.parse(JSON.parse(JSON.stringify(msgStore.read_list))))); 
  noread.value = arr.length > 0 ? true : false
})

bus.on('msgRed', async(id:number) => {
  if(id === 1){
    noread.value = true
  }else{
    noread.value = false
  }
})

// 退出登录
const goLogin = () => {
  router.push('/login')
  localStorage.clear()
}

// 跳转登录日志
const goLoginLog  = () => {
  router.push('/login_log')
}

// 跳转个人设置
const goSetting = () => {
  router.push('/setting')
}

// 点击头部Badge 徽章
const department_msg = ref()
const openDepartmentMessage = () => {
  department_msg.value.open()
}

</script>

<style lang="scss" scoped>
	// 侧边栏
	.el-aside {
		height: 100vh;
		background: #2b303b;
		width: 210px;
		// 隐藏滚动条
		overflow-x: hidden;

		// 菜单
		.el-menu {
			background: #2b303b;
			width: 210px;
			height: 100vh;
			border-right: 0px;
		}

		// 标题
		.title {
			padding: 20px;
			display: flex;
			justify-content: center;
			color: #fff;
			background: #2b303b;
		}

		.el-menu-item {
			color: #fff;
		}

		// .el-sub-menu__title {
		// 	color: #fff;
		// }
	}

	.el-header {
		display: flex;
		height: 50px;//55
		background: #262f3e;
		color: #c1c6c8;
		align-items: center;
		justify-content: space-between;

		// 欢迎语
		.header-left-content {
			font-size: 14px;
		}

		.header-right-content {
			width: 160px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}

	// 徽章
	.item {
		cursor: pointer;
	}

	.el-main {
		--el-main-padding: 0;
		background-color: #f3f4fa;
	}

	// 无子菜单的
	.el-menu-item:hover {
		background: #006eff;
	}

	// 有子菜单的
	:deep(.el-sub-menu__title:hover) {
		background: #006eff;
	}

	:deep(.el-sub-menu__title) {
		color: #fff;
	}

	:deep(.el-menu--inline) {
		background: #2b303b;
	}
</style>